<template>
	<el-row :gutter="13">
	    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
			<div class="grid-content ">	
				<el-card class="box-card" style="height: 100%;">
				    <div class="box-card-top">
						<div >
							<span>净利润</span>
							<span style="color: #495057;  
							font-size: calc(0.9rem + .075vw);
							font-weight: 12.5rem;">${{ profit }}元</span>
						</div>
						
						<div id="chart1" v-if="isShowEcharts">
						</div>							
					</div>									    
					
					<div class="box-card-bottom">				    	
				    	<span>同比上一周:</span>
						<span style="
						background-color: rgba(42,181,125,.25);
						border-radius:.25rem;margin-left: 1.25rem;
						font-size: 10px;color:#2ab57d;">+$255k元</span>
				    </div>					
				</el-card>			
			</div>
		</el-col>
	    
		<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="xs-box">
			<div class="grid-content">
				<el-card class="box-card" style="height: 100%;">
				    <div class="box-card-top">
						<div >
							<span>总收入</span>
							<span style="color: #495057;
							font-size: calc(0.9rem + .075vw);
							font-weight: 12.5rem;">${{ income }}元</span>
						</div>
						
						<div id="chart2" v-if="isShowEcharts">
						</div>							
					</div>									    
					
					<div class="box-card-bottom">
						<span>同比上一周:</span>
						<span style="
						background-color: rgba(42,181,125,.25);
						border-radius:.25rem;margin-left: 1.25rem;
						font-size: 10px;color:#2ab57d;">+$255k元</span>
					</div>					
				</el-card>
			</div>
		</el-col>
	    
		<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="md-box">
			<div class="grid-content">
				<el-card class="box-card" style="height: 100%;">
				    <div class="box-card-top">
						<div >
							<span>总支出</span>
							<span style="color: #495057;
							font-size: calc(0.9rem + .075vw);
							font-weight: 12.5rem;">${{ output }}元</span>
						</div>
						
						<div id="chart3" v-if="isShowEcharts">
						</div>							
					</div>									    
					
					<div class="box-card-bottom">
						<span>同比上一周:</span>
						<span style="
						background-color: rgba(42,181,125,.25);
						border-radius:.25rem;margin-left: 1.25rem;
						font-size: 10px;color:#2ab57d;">+$255k元</span>
					</div>					
				  </el-card>
			</div>
		</el-col>
	    
		<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" class="md-box">
			<div class="grid-content">
				<el-card class="box-card" style="height: 100%;">
				    <div class="box-card-top">
						<div >
							<span>预期收入达到情况</span>
						</div>
						
						<div id="chart4" v-if="isShowEcharts">
						</div>							
					</div>									    
					
					<div class="box-card-bottom">
						<span>同比上一周:</span>
						<span style="
						background-color: rgba(42,181,125,.25);
						border-radius:.25rem;margin-left: 1.25rem;
						font-size: 10px;color:#2ab57d;">+5%</span>
					</div>					
				</el-card>
			</div>
		</el-col>
	</el-row>
	
	<el-row :gutter="10">
		<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="md-box-2">
			<div class="grid-content bg-purple-light">						  
				<el-card class="box-card" style="height: 100%;">
				    <template #header>
				      <div class="card-header">
				        <span>近15日销售情况统计图</span>
				      </div>
				    </template>
					<div id="chart6" style="height:260px;" v-if="isShowEcharts">						
					</div>
				</el-card>
			</div>
		</el-col>
	    
		<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
			<div class="grid-content">
				<el-card class="box-card" style="height: 100%;">
				    <template #header>
				      <div class="card-header">
				        <span>月度销售情况折线统计图</span>
				      </div>
				    </template>
					<div id="chart5" style="height:260px;" v-if="isShowEcharts">						
					</div>
				</el-card>
			</div>
		</el-col>		
	</el-row>
</template>

<script lang="ts" setup>
	import * as echarts from 'echarts'
	import { onMounted,watch,Unmounted,onUnmounted,ref} from 'vue'
	import { getAcDate,getDayDate,getMonthData} from "../../http/dataStatic.js"

	let profit = ref("")
	let output = ref("")
	let income = ref("")
	
	
	onMounted(() =>{
		let chart1 = echarts.init(document.getElementById("chart1"));
		let chart2 = echarts.init(document.getElementById("chart2"));
		let chart3 = echarts.init(document.getElementById("chart3"));
		let chart4 = echarts.init(document.getElementById("chart4"));
		let chart5 = echarts.init(document.getElementById("chart5"));
		let chart6 = echarts.init(document.getElementById("chart6"));
		getAcDate().then(res=>{	
			profit.value = res.data.profit[6]
			output.value = res.data.output[6]
			income.value = res.data.income[6]
			// 绘制图表echart1
		  chart1.setOption({
			tooltip: {
				show:true
				},
			xAxis: {
				type: 'category',
				show:'false',
				axisTick: {
					show: false
				},
				axisLabel:{
					show: false
				}
			},
			yAxis:{
				type: '',
				show:true,
				scale:true,
				axisLabel:{
					show: false
				}
			},
			
			grid:{
				x:-10,
				y:10,
				x2:-10,
				y2:1,
				height:100,
				borderWidth:1,
				
				},
			series:[
				{
				data:res.data.profit,
				type: 'line',
				smooth: true,
				color:'#6e9dff',
				areaStyle: {}
				}
			]
			});
		
			
			// 绘制图表echart2
			chart2.setOption({
				tooltip: {
					show:true
					},
				xAxis: {
					type: 'category',
					show:'false',
					axisTick: {
						show: false
					},
					axisLabel:{
						show: false
					}
				},
				yAxis:{
					type: '',
					show:true,
					scale:true,
					axisLabel:{
						show: false
					}
				},			
				grid:{
					x:2,
					y:10,
					x2:5,
					y2:1,
					height:100,
					borderWidth:1
					},
				series:[
					{
					data: res.data.income,
					type: 'line',
					smooth: true,
					color:'#f56c6c',
					}
				]
			});	
			// 绘制图表echart3
			chart3.setOption({
				tooltip: {
					show:true
					},
				xAxis: {
					type: 'category',
					show:'false',
					axisTick: {
						show: false
					},
					axisLabel:{
						show: false
					}
				},
				yAxis:{
					type: '',
					show:true,
					scale:true,
					axisLabel:{
						show: false
					}
				},			
				grid:{
					x:2,
					y:10,
					x2:5,
					y2:1,
					height:100,
					borderWidth:1
					},
				series:[
					{
					data:res.data.output,
					type: 'line',
					smooth: true,
					color:'#31d7da',
					}
				]
			});		
		})
		// 绘制图表echart4
		chart4.setOption({
			tooltip: {
			    trigger: 'item',
			    formatter: '{a} <br/>{b}: {c} ({d}%)'
			  },
			  color: ['#5ee76d', '#D8D8D8'],
			  title: {
			    text: ' 80%',
			    left: 'center',
			    top: '50%',
			    textStyle: {
			      color: '#5ee76d',
			      fontSize: 20,
			      align: 'center'
			    }
			  },
			  graphic: {
			    type: 'text',
			    left: 'center',
			    top: '40%',
			    style: {
			      text: '已完成',
			      textAlign: 'center',
			      fill: '#333',
			      fontSize: 17,
			      fontWeight: 100
			    }
			  },
			  grid:{
					x:2,
					y:10,
					x2:5,
					y2:1,
					height:150,
					borderWidth:1
			      },
			  series: [
			    {
			      name: '完成情况',
			      type: 'pie',
			      radius: ['60%', '70%'],
			      avoidLabelOverlap: false,
			      label: {
			        normal: {
			          show: false,
			          position: 'center'
			        }
			      },
			
			      data: [
			        { value: 80, name: '已完成' },
			        { value: 20, name: '未完成' }
			      ]
			    }
			  ]
		});	
		
		getMonthData().then(res =>{
			// 绘制图表echart5
			chart5.setOption({
				   tooltip: {
				     trigger: 'axis'
				   },
				   legend: {
				     data: ['净利润', '总收入', '总支出']
				   },
				   grid: {
						left: 0,
						right: '4%',
						bottom: 2,
						height:230,
						top:26,
						containLabel: true
				   },
				   toolbox: {
				     feature: {
				       saveAsImage: {}
				     }
				   },
				   xAxis: {
				     type: 'category',
				     boundaryGap: false,
				     data: ['1','2','3','4','5','6','7','8','9','10','11','12',]
				   },
				   yAxis: {
				     type: 'value'
				   },
				   series: [
				     {
				       name: '净利润',
				       type: 'line',
				       data: res.data.monthProfit
				     },
				     {
				       name: '总收入',
				       type: 'line',
				       data: res.data.monthIncome
				     },
				     {
				       name: '总支出',
				       type: 'line',
				       data: res.data.monthOutput
				     },
				 
				   ]
			});
		})
		
		getDayDate().then(res=>{	
		//图表6折线柱状图
		chart6.setOption({
			tooltip: {
			    trigger: 'axis',
			    axisPointer: {
					type: 'cross',
			    }
			},
			color: ['#63b2ee','#76da91','#cb9bff','#fa8080 '],
			toolbox: {
				feature: {
					dataView: { show: true, readOnly: false },
					magicType: { show: true, type: ['line', 'bar'] },
					restore: { show: true },
					saveAsImage: { show: true }
				}
			},
			legend: {
				data: ['收入', '支出','净利润','净利润增长']
			},
			grid: {
				left: 0,
				right: 0,
				bottom: 2,
				height:200,
				top:60,
				containLabel: true
			},
			xAxis: [{
				type: 'category',
				data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
				axisPointer: {
					type: 'shadow'
				}
			}],
			yAxis: [{
			    type: 'value',
			    name: '金额',
			    axisLabel: {
					formatter: '{value}'
			    }
			},
			{
			    type: 'value',
			    name: '增长情况',
			    axisLabel: {
			    formatter: '{value}'
				}
			}],
			series: [
			    {
			    name: '收入',
			    type: 'bar',
			    data: res.data.income
			    },
			    {
			      name: '支出',
			      type: 'bar',
			      data: res.data.output
			    },
			    {
			      name: '净利润',
			      type: 'bar',
			      yAxisIndex: 1,
			      data: res.data.profit
			    },
			    {
			      name: '净利润增长',
			      type: 'line',
			      yAxisIndex: 1,
			      data: res.data.growth
			    }
			  ]
			});
		})
		window.onresize =  () => {
			chart1.resize();
			chart2.resize();
			chart3.resize();
			chart4.resize();
			chart5.resize();
			chart6.resize();
	    }	
	})
	
	let isShowEcharts = ref(true)
	onUnmounted(() =>{
		isShowEcharts.value=false
	})	
	// 搜索日期	
	const value1 = ref('')
	const value2 = ref('')
	
	const shortcuts = [
	  {
	    text: 'Today',
	    value: new Date(),
	  },
	  {
	    text: 'Yesterday',
	    value: () => {
	      const date = new Date()
	      date.setTime(date.getTime() - 3600 * 1000 * 24)
	      return date
	    },
	  },
	  {
	    text: 'A week ago',
	    value: () => {
	      const date = new Date()
	      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
	      return date
	    },
	  },
	]
	
	const disabledDate = (time:Date) => {
	  return time.getTime() > Date.now()
	}
</script>

<style scoped="scoped">
	span{
		color:#387bb1;
	}
	.el-row:first-child{
		height: 12.5rem;
	}
	.el-row:last-child{
		height:21.875rem;
		margin-top:1.25rem;
	}
	.el-col {
		height: 100%;
		border-radius: 4px;	
	}
	.grid-content {
		height: 100%;
		border-radius: 4px;
		min-height: 36px;
	}
	
	.box-card{		
	}
	:deep(.el-card__body:first-child){
		height: 80%;
	}
	.box-card-top {
		width: 100%;
		height: 9.375rem;
	}
	.box-card-top div:first-child{
		width:100%;
		height:1.875rem;
		border-bottom: 1px #a1bfcf solid;
	}
	.box-card-top div:first-child span{
		line-height: 1.875rem;
	}
	.box-card-top div:first-child span:last-child{
		margin-left: 3.125rem;
	}
	.box-card-top div:last-child{
		width:100%;
		height: 7.6rem;
	}
	.box-card-bottom{
		font-size: 0.1875rem;
	}
	:deep(.el-tabs__content){
		height: 80%;
	}
	:deep(.el-tabs){
		height: 100%;
	}
	
	@media screen and (max-width:74.99rem) {
		.el-row:last-child{
			margin-top:12.9rem;
		}
		.md-box{
			padding-top: 0.125rem;
		}
		.md-box-2{
			padding-top: 0.125rem;
		}
	}
	@media screen and (max-width:47.9rem) {
		.el-row:last-child{
			margin-top:37.625rem;
		}
		.xs-box{
			padding-top: 0.125rem;
		}
	}
</style>
